<template>
    <div class="orderLog StockDrugDetail">
        <div style="height: 610px;">
            <Table :columns="tableColumns" :loading="loading"  :data-source="tableData" style="margin-top: 20px;" />
        </div>

        <Pagination style="margin-left: auto;margin-top: 20px;" :key="pageSize + 'Pagination' + currentPage" :count="total"
            :page-size="pageSize" :pageNo="currentPage" @onPagechange="handlePageChange"
            @onSizechange="handleSizeChange" />
    </div>
</template>
<script setup lang="ts">
    import {getStockDrugDetailList} from '@/api/drug'
    import type {  TableColumn } from '@/types/table';
    import type { GetStockDrugDetailResponseList } from '@/types/drug'
    const loading = ref<boolean>(false)
    const tableData = ref<GetStockDrugDetailResponseList[]>([])
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const tableColumns: TableColumn[] = [
        { prop: 'batchNo', label: '生产批号' },
        { prop: 'stockQty', label: '库存数量' },
        { prop: 'batchDate', label: '生产日期' },
        { prop: 'expiryDate', label: '有效期' },
    
    ]
    
    const handlePageChange = (page: number) => {
        currentPage.value = page;
        getStockDrugDetailListApi()
    };
    const handleSizeChange = (size: number) => {
        currentPage.value = 1;
        pageSize.value = size;
        getStockDrugDetailListApi()

    };
    const dataType = defineProps<{ storageId:any, drugId:any }>();
    // const purchaseOrderStatusEnum =  ref<any>(stores.useBaseDataStore().getEnumSelect('stockLogTypeEnum'))

    const getStockDrugDetailListApi = async()=>{

        loading.value = true
        let data = {
            storageId:dataType.storageId,
            drugId:dataType.drugId,
            pageNo:currentPage.value,
            pageSize:pageSize.value
        }
        let res = await getStockDrugDetailList(data)
        if(res.code != '200'){
            //ElMessage.error(res.msg);
            return
        }
        total.value = res.data.totalCount
        tableData.value = res.data.list
        loading.value = false

    }
    getStockDrugDetailListApi()
</script>

<style lang="scss">
    .orderLog{
        position: relative;
        height: auto !important;
        .table-pagination{
            width: 100% !important;
        }
    }
     .StockDrugDetail .table-pagination{
        bottom: 10px;
    }
</style>